import React from 'react';

interface ThemeType {
  color: string;
  background: string;
}
const ThemeContext = React.createContext<ThemeType | null>(null); // 主题颜色Context
const LanContext = React.createContext<string | null>(null); // 主题语言Context

// context的嵌套使用

function ConsumerDemo() {
  return (
    <ThemeContext.Consumer>
      {(themeContextValue) => (
        <LanContext.Consumer>
          {(lanContextValue) => {
            const { color, background } = themeContextValue!;
            return (
              <div style={{ color, background }}>
                {' '}
                {lanContextValue === 'CH'
                  ? '大家好，让我们一起学习React!'
                  : 'Hello, let us learn React!'}{' '}
              </div>
            );
          }}
        </LanContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

const Son = React.memo(() => <ConsumerDemo />);

export default function ProviderDemo() {
  const [themeContextValue] = React.useState({ color: '#FFF', background: 'blue' });
  const [lanContextValue] = React.useState<string>('CH1'); // CH -> 中文 ， EN -> 英文
  return (
    <ThemeContext.Provider value={themeContextValue}>
      <LanContext.Provider value={lanContextValue}>
        <Son />
      </LanContext.Provider>
    </ThemeContext.Provider>
  );
}
